<include file="public@header">
<body>
    <div class="indexbg headhead">
        <if $user.mobile>
            <h3 class="mytitle" style="position: relative;left: -0.4rem;">{:lang('Bound')}</h3>
            <div class="myinfshow">
                <p class="myinfshowp">{:lang('Mobile')}<span style="float: none;margin-left: 0.7rem;">{:substr_replace($user.mobile,'***',3,4)}</span></p>
            </div>
            <p class="sjnotep">{:lang('If you need to change your phone number, please contact customer service')}</p>
        <else/>
            <form action="" method="post" class="layui-form">
            <h3 class="mytitle">{:lang('Bind phone')}</h3>
            <div class="infshowall">
                <div class="infshow">
                    <p>{:lang('Mobile')}</p>
                    <input type="text" name="username" placeholder="{:lang('Please enter phone number')}">
                </div>
                <div class="infshow infyzm">
                    <p>{:lang('Code')}</p>
                    <input type="text" name="code" placeholder="{:lang('Please enter code')}">
                    <button type="button" class="infyzmbtn">{:lang('Get code')}</button>
                </div>
                <div class="infshow">
                    <p>{:lang('Login password')}</p>
                    <input type="text" name="password" placeholder="{:lang('Please enter your password')}">
                </div>
            </div>
            <button class="emailbtn" lay-submit>{:lang('Submit')}</button>
            </form>
        </if>
    </div>
    <script src="__STATIC__/js/jquery.js"></script>
    <script src="__STATIC__/layui/layui.js"></script>
    <script type="text/javascript">
    layui.use(['layer','form'],function(){
        var layer = layui.layer,
            form = layui.form;

        $('.infyzmbtn').click(function(){
            var username = $('input[name=username]').val();
            var obj = $(this);
            $.ajax({
                type: 'get',
                url: '{:url("user/VerificationCode/send")}',
                data: {username:username},
                success:function(res){
                    layer.msg(res.msg)
                    if(res.code == 1){
                        let count = 60;
                        const countDown = setInterval(() => {
                        if (count === 0) {
                        $(obj).text('{:lang("Resend")}').removeAttr('disabled');
                        clearInterval(countDown);
                        } else {
                           $(obj).attr('disabled', true);
                           $(obj).text(count + 's');
                        }
                        count--;
                        }, 1000);
                    }
                }
            });
        });

        //监听提交
        form.on('submit', function(data){
            var _this = $(this);
            _this.attr("disabled",true);
            $.ajax({
                type: 'post',
                url: '{:url("user/profile/bindingMobile")}',
                data: data.field,
                success:function(res){
                    layer.msg(res.msg)
                    if(res.code == 1){
                        setTimeout(function(){ location.reload(); }, 1500);
                    }else{
                        _this.removeAttr("disabled");
                    }
                }
            });
            return false;
        });
    });
    </script>
</body>
</html>